<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_CSS常用值</title>
  <style>
    h1 {

        color: red;
        color: rgb(255, 0, 0);
        color: rgb(0, 255, 255);
        color: rgb(0, 255, 0);
        color: rgb(255, 0, 255);
        color: rgb(0, 0, 255);
        color: rgb(255, 255, 0);
        color: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
        color: rgb(128, 128, 128);
        color: rgb(96, 96, 96);
    }
    div{
        width: 100px;
        height: 100px;
        border: 10px black solid;
     }
    .d1{
        background-color: rgba(255,0,0,1);
    }
    .d2{
        background-color: rgba(255,0,0,.75);
    }
    .d3{
        background-color: rgba(255,0,0,.5);
    }
    .d4{
        background-color: rgba(255,0,0,.25);
    }
    .d5{
        background-color: rgba(255,0,0,0);
    }
    .bgi {
        width: 500px;
        height: 200px;
        background-image: linear-gradient(90deg,red,cyan);
    }
    .viewport{
        width: 100vw;
        height: 100vw;
        background-color: green;
    }
  </style>
</head>
<body>
<div class="viewport"></div>
  <div class="bgi"></div>
  <h1>测试颜色</h1>
  <div class="d1"></div>
  <div class="d2"></div>
  <div class="d3"></div>
  <div class="d4"></div>
  <div class="d5"></div>
</body>
</html>